<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>模拟古诗垂直显示文本</title>
<script src="../JS/vue.js"></script>
</head>
<body>
<div id="example">
	<div v-bind:style="[baseStyle, fontStyle, styleRadius]">
		<h4>枫桥夜泊</h4>
		<p>
			月落乌啼霜满天，<br>江枫渔火对愁眠。<br>姑苏城外寒山寺，<br>夜半钟声到客船。
		</p>
	</div>
</div>
<script type="text/javascript">
var vm = new Vue({
	el:'#example',
	data:{
		width : 400,
		margin : '10px auto',
		padding : 30,
		bgcolor : 'lightblue',
		family : "华文楷体",
		fontSize : 36,
		color : 'green',
		align : 'center',
		border : '1px solid #CCCCCC',
		boxShadow : '3px 3px 6px #999999',
		mode : 'vertical-rl'//垂直方向自右而左的书写方式
	},
	computed: {
		baseStyle: function () {//基本样式
			return {
				width: this.width + 'px',
				margin: this.margin,
				padding: this.padding + 'px',
				'background-color': this.bgcolor
			}
		},
		fontStyle: function(){//字体样式
			return {
				'font-family': this.family,
				fontSize: this.fontSize + 'px',
				color: this.color,
				'text-align': this.align
			}
		},
		styleRadius: function () {
			return { 
				border: this.border,//边框样式
				'box-shadow': this.boxShadow,//边框阴影
				'writing-mode': this.mode//书写方式
			}
		}
	}
})
</script>


</body>

</html>



